<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>舰长人数重合热力图</title>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
    <input type="file" id="fileInput" accept=".xlsx" style="display: none;" />
    <button id="fileInputBut" onclick="document.getElementById('fileInput').click()">选择Excel文件</button>
    <div id="container" style="height: 100%"></div>
    <script>
        let chart = echarts.init(document.getElementById('container'));
        const ids = ["又一", "恬豆", "沐霂", "梨安"];
        var option;
        function formatToPercentage(value) {
            // 1. 将数值转换为百分比（乘以 100）
            const percentageValue = value * 100;
            
            // 2. 使用 toFixed(4) 保留四位小数并四舍五入
            const formatted = percentageValue.toFixed(4);
            
            // 3. 拼接百分号返回字符串
            return formatted + '%';
        }
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            // 读取Excel文件
            const reader = new FileReader();
            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array'});
                const sheetName = workbook.SheetNames[0]; // 取第一个工作表
                const worksheet = workbook.Sheets[sheetName];
                const sheetName01 = workbook.SheetNames[1];
                const worksheet01 = workbook.Sheets[sheetName01];
                const json = XLSX.utils.sheet_to_json(worksheet, {header:1});
                const json01 = XLSX.utils.sheet_to_json(worksheet01, {header:1});
                var hearderData01 = [];
                var hearderData02 = [];
                var hearderData03 = [];
                var hearderData04 = [];
                var peoples = [];
                var max = -1;
                for (let row of json.slice(1)) {
                    if (row[0] !== undefined) {
                        hearderData01.push(Number(row[0]));
                    }
                    if (row[1] !== undefined) {
                        hearderData02.push(Number(row[1]));
                    }
                    if (row[2] !== undefined) {
                        hearderData03.push(Number(row[2]));
                    }
                    if (row[3] !== undefined) {
                        hearderData04.push(Number(row[3]));
                    }
                }
                for (let row of json01.slice(1)) {
                    for(let rowdata of row){
                        peoples.push(rowdata);
                    }
                }
                excelData = [
                    hearderData01,hearderData02,hearderData03,hearderData04
                ]
                for (const arryIndex in excelData) {
                    if(Math.max(...excelData[arryIndex]) > max){
                        max = Math.max(...excelData[arryIndex]);
                    }
                }
                const heatmapData = [];
                excelData.forEach((row, yIndex) => {
                    row.forEach((value, xIndex) => {
                        heatmapData.push([xIndex, yIndex, value]);
                    });
                });
                option = {
                    dataset: [{
                        source: heatmapData
                    }],
                    title: {
                        text: '航海人数相交热力图'
                    },
                    xAxis: {
                        type: 'category',
                        data: ids
                    },
                    yAxis: {
                        type: 'category',
                        data: ids
                    },
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(255, 255, 255, 0.9)', // 提示框背景色
                        borderColor: '#ccc', // 提示框边框颜色
                        borderWidth: 1, // 提示框边框宽度
                        padding: 10, // 内边距
                        textStyle: {
                            color: '#333', // 文字颜色
                            fontSize: 14, // 字体大小
                            fontFamily: 'sans-serif' // 字体类型
                        },
                        extraCss: {
                            boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' // 添加阴影效果
                        },
                        formatter: function(params) {
                            // 获取坐标标签和数值
                            const xAxisData = option.xAxis.data; // 横坐标数据源（ids）
                            const yAxisData = option.yAxis.data; // 纵坐标数据源（ids）
                            const n = xAxisData.length; // 坐标轴长度（假设为正方形）
                            const index = params.dataIndex; // 当前数据项的索引
                            const xIndex = index % n; // 计算横坐标索引
                            const yIndex = Math.floor(index / n); // 计算纵坐标索引
                            const xLabel = xAxisData[xIndex];
                            const yLabel = yAxisData[yIndex];
                            const xLabelData = formatToPercentage(params.value[2]/peoples[xIndex])
                            const yLabelData = formatToPercentage(params.value[2]/peoples[yIndex])
                            // 格式化提示框内容
                            return [
                                `<strong>${xLabel}</strong>: ${xLabelData}`, // 横坐标标签
                                `<br/>${yLabel}: ${yLabelData}`, // 纵坐标标签
                                `<br/>重叠人数: <span style="color:#ff6b6b;font-weight:bold;">${params.value[2]}</span>` // 数据值
                            ].join('');
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: max,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        inRange: {
                            color: [
                            '#5570a3',   // 深蓝调柔和版
                            '#7095c0',   // 蓝调柔和版
                            '#90b0d0',   // 浅蓝调柔和版
                            '#aec7e8',   // 更浅的蓝
                            '#c4d5e0',   // 浅灰蓝
                            '#e0ecf4',   // 非常浅的蓝灰
                            '#f7f7f7',   // 接近白色，但稍微带点灰
                            '#fee8c8',   // 淡黄
                            '#fdd0a2',   // 淡橙
                            '#fdae6b',   // 浅橙
                            '#f4a582'    // 浅红橙
                        ]
                        }
                    },
                    series: [{
                        type: 'heatmap',
                        datasetIndex: 0,
                        label: { show: true },
                        emphasis: { itemStyle: { borderColor: '#333', borderWidth: 1 } }
                    }]
                };
                if (option && typeof option === 'object') {
                    chart.setOption(option);
            }
            }
            reader.readAsArrayBuffer(file);
            document.getElementById('fileInputBut').style.display = 'none';
        })
        // // 原始数据
        // const ids = ['又一', '恬豆', '沐霂', '梨安'];
        // const data = [
        //     [0, 58, 84, 76],
        //     [58, 0, 73, 78],
        //     [84, 73, 0, 92],
        //     [76, 78, 92, 0]
        // ];

        // // 转换为 ECharts 需要的格式
        // const heatmapData = [];
        // data.forEach((row, yIndex) => {
        //     row.forEach((value, xIndex) => {
        //         heatmapData.push([xIndex, yIndex, value]);
        //     });
        // });

        window.addEventListener('resize', chart.resize);
    </script>
</body>
</html>